<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { ElMenu, ElSubMenu, ElMenuItem, ElInput } from 'element-plus';
  import '@/views/DigitalTwin/css/left.css';
  interface MenuItem {
    index: string;
    icon?: URL | string;
    title: string;
    children?: MenuItem[];
  }

  const menuItems = ref<MenuItem[]>([
    {
      index: '1-1',
      icon: 'el-icon-document',
      title: '基础图片',
      children: [
        {
          index: '1-1-1',
          icon: new URL('@/assets/DigitalAssets/cube.png', import.meta.url).href,
          title: '立方体',
        },
        {
          index: '1-1-2',
          icon: new URL('@/assets/DigitalAssets/ball.png', import.meta.url).href,
          title: '球体',
        },
        {
          index: '1-1-3',
          icon: new URL('@/assets/DigitalAssets/pipe.png', import.meta.url).href,
          title: '管道',
        },
      ],
    },
  ]);

  const searchQuery = ref<string>('');

  const filteredMenuItems = computed(() => {
    if (!searchQuery.value) return menuItems.value;

    return menuItems.value.filter((item) => {
      const hasMatchingChild = item.children?.some((child) =>
        child.title.toLowerCase().includes(searchQuery.value.toLowerCase()),
      );
      return item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) || hasMatchingChild;
    });
  });
  const createFolder = () => {
    // Logic to create a new folder
    console.log('Create new folder');
  };

  const editFolder = (folder: MenuItem) => {
    // Logic to edit the folder
    console.log('Edit folder:', folder);
  };

  const deleteFolder = (folder: MenuItem) => {
    // Logic to delete the folder
    console.log('Delete folder:', folder);
  };
</script>

<template>
  <div class="model-view">
    <!-- 左侧导航栏容器 -->
    <div class="menu-container">
      <!-- 搜索框 -->
      <el-input v-model="searchQuery" placeholder="搜索..." class="search-box" />
      <!-- 新建文件夹按钮 -->
      <div class="create-folder" @click="createFolder">+ 新建文件夹</div>
      <!-- 导航栏 -->
      <el-menu
        background-color="#1e2430"
        text-color="#fff"
        active-text-color="#ffd04b"
        class="side-bar"
      >
        <el-sub-menu v-for="item in filteredMenuItems" :key="item.index" :index="item.index">
          <template #title>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
            <img v-if="child.icon" :src="child.icon" alt="" style="width: 30px; height: 30px" />{{
              child.title
            }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </div>
</template>

<style scoped>
  :deep(.el-input__wrapper) {
    background-color: gray !important;
    box-shadow: none;
  }

  .create-folder {
    padding-left: 0.8vw;
    background-color: #1e2430;
    cursor: pointer;
    color: rgb(69, 131, 255); /* 默认字体颜色为蓝色 */
    font-size: 0.8vw;
    text-decoration: none; /* 默认没有下划线 */
  }

  .create-folder:hover {
    text-decoration: underline; /* 鼠标悬浮时添加下划线 */
  }
</style>
